<template>
	<view class="content">
		<view class="view-group f-col r-center">
			<image v-if="signData.checkImg != ''" style="width:100%;height: auto;" :src="signData.checkImg"></image>
			<text class="title">{{ signData.checkTitle }}</text>
			<view class="avatar-view">
				<image :src="signData.avatar"></image>
				<text class="text-name">{{ signData.nickName }}</text>
				<text class="text-createTime">{{ signData.createTime }}</text>
			</view>
			<text style="width: 710rpx;">{{ signData.checkContent }}</text>
			<image v-if="signData.addImg != ''" style="width:150rpx;height:150rpx;" :src="signData.addImg"></image>
		</view>
		<view class="view-group f-col r-left m-top-20">
			<text>打卡规则</text>
			<text class="text-line">* 打卡日期: {{ signData.createTime + " - " + signData.endTime }}</text>
			<text class="text-line">* 打卡频率: {{ showPopupAry7[signData.checkInFrequency] }}</text>
			<text class="text-line">* 打卡时间: {{ getCheckTimePart }}</text>
			<text class="text-line">* 当前打卡允许补卡{{ signData.replacementNum ? signData.replacementNum : 0 }}次</text>
			<text class="text-line">* 限制补卡时间: 打卡终止前</text>
			<!-- <text class="text-line">* {{showPopupAry4[signData.isSee == -1 ? "":signData.isSee]}}</text> -->
			<view class="view-line" style="margin: 30rpx 0;"></view>
			<view class="f-row c-between">
				<text class="text-line">打卡第{{ getDays }}天</text>
				<!-- <text class="text-line">打卡第{{getDays}}天，累计打卡{{signData.checkTotal}}次</text> -->
				<text class="text-line">已有{{ signData.checkTotal }}人参与</text>
			</view>
		</view>
		<view class="view-group f-col m-top-20" v-if="staffNameAry.length > 0">
			<view class="f-row">
				<view class="time-item" :class="timeStr == currDayStr ? 'time-select-item' : ''"
					@click="setTimeStr(currDayStr)">今天</view>
				<view class="time-item" :class="timeStr == yesterdayStr ? 'time-select-item' : ''"
					@click="setTimeStr(yesterdayStr)">昨天</view>
				<view class="time-item" :class="showSelectTime ? 'time-select-item' : ''" @click="setTimeStr(-1)">
					{{ showSelectTime ? timeStr : '选择时间' }}
				</view>
			</view>
			<text style="margin: 40rpx 0;">打卡完成情况（{{ getCheckNum }}/{{ staffNameAry.length }}）</text>
			<view class="name-view f-wrap">
				<view class="name-item" :class="getIsCheck(item.name) ? 'name-item-check' : ''"
					v-for="(item, index) in staffNameAry" :key="index">
					<u-icon style="position:absolute;top:0;right:0;" v-if="getIsCheck(item.name)" color="#18c543"
						name="checkbox-mark" size="20"></u-icon>
					{{ item.name }}
				</view>
			</view>
		</view>
		<view class="view-group f-col m-top-20">
			<view class="f-row">
				<view class="time-item" :class="timeStr == 0 ? 'time-select-item' : ''" @click="setTimeStr(0)">全部</view>
				<view class="time-item" :class="timeStr == currDayStr ? 'time-select-item' : ''"
					@click="setTimeStr(currDayStr)">今天</view>
				<view class="time-item" :class="timeStr == yesterdayStr ? 'time-select-item' : ''"
					@click="setTimeStr(yesterdayStr)">昨天</view>
				<view class="time-item" :class="showSelectTime ? 'time-select-item' : ''" @click="setTimeStr(-1)">
					{{ showSelectTime ? timeStr : '选择时间' }}
				</view>
			</view>
		</view>
		<view class="f-col" style="margin-bottom:300rpx;">
			<view class="record-item f-row" v-for="(item, index) in htFormRecordAry" :key="index">
				<image class="record-icon" :src="item.avatar"></image>
				<view class="content-view f-col r-left">
					<view class="f-col r-left" v-for="(item2, index2) in item.list" :key="index2">
						<text v-if="index2 == 0">{{ item2.content }}</text>
						<text v-if="index2 == 0" class="text-line" style="margin-bottom: 20rpx;">{{ item2.createTime
							}}</text>
						<text v-if="item2.type == '文本' && index2 != 0">{{ item2.content }}</text>
						<image v-if="item2.type == '图片'" style="width:150rpx;height:150rpx;" :src="item2.content">
						</image>
						<view v-if="item2.type == '地址'" class="f-row">
							<image style="width:35rpx;height:35rpx;"
								src="http://sni1muz85.hd-bkt.clouddn.com/img/icons/address.png"></image>
							<text>{{ item2.content }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="use-template-view f-row c-center r-center">
			<view class="use-template-btn" :class="isCanCheck ? '' : 'btn-disable'" @click="onClickOpenPopup2">立即打卡
			</view>
		</view>
		<u-popup v-model="showPopup2" :closeable="false" border-radius="20" mode="bottom">
			<view class="f-col r-center" style="padding:20rpx;padding-bottom: 100rpx;">
				<view v-for="(item, index) in htContentList" :key="index">
					<view class="submit-item f-col" v-if="item.type == '文本' && index == 0">
						<text class="sunmit-title">{{ index + ". " + item.titleName }}</text>
						<input class="name-input" v-model="item.inputText" />
					</view>
					<view class="submit-item f-col" v-if="item.type == '文本' && index > 0">
						<text class="sunmit-title">{{ index + ". " + item.titleName }}</text>
						<textarea class="name-input" style="height: 200rpx;" v-model="item.inputText" />
					</view>
					<view class="submit-item f-col" v-if="item.type == '图片'">
						<text class="sunmit-title">{{ index + ". " + item.titleName }}</text>
						<u-upload width="150" height="150" :action="uploadUrl" :index="index"
							@on-success="onUploadIcon"></u-upload>
					</view>
					<view class="submit-item f-col" v-if="item.type == '地址'">
						<text class="sunmit-title">{{ index + ". " + item.titleName }}</text>
						<input class="name-input" v-model="item.inputText" />
					</view>
				</view>
				<view class="use-template-view f-row c-center r-center">
					<view class="use-template-btn" @click="onSubmitForm">提交</view>
				</view>
			</view>
		</u-popup>
		<u-picker v-model="showPicker" mode="time" :params="params" @confirm="onSelectTime"></u-picker>
	</view>
</template>

<script>
	import share from '@/mixins/share.js'
	export default {
		async onShareAppMessage() {
			return {
				title: "分享打卡",
				path: "/myPage/sign/signOnDetail?signid=" + this.signId
			}
		},
		data() {
			return {
				signId: 0,
				signData: null,
				showPopupAry7: ["每天", "每月", "每周"],
				showPopupAry4: ["填写内容互不可见", "填写内容互相可见"],
				currDayStr: "",
				yesterdayStr: "",
				timeStr: "",
				showPicker: false,
				params: {
					year: true,
					month: true,
					day: true
				},
				staffNameAry: [],
				showPopup2: false,
				uploadUrl: "",
				htContentList: [],
				htFormRecordAry: []
			};
		},
		onLoad(opt) {
			this.uploadUrl = this.$api.uploadPic;
			let that = this;
			this.signId = opt.signid;
			this.initData();
			this.$api.request({
				url: this.$api.htContentList,
				data: {
					checkId: this.signId
				}
			}).then(resp => {
				if (resp.code == 200) {
					for (let v of resp.rows) {
						v.inputText = "";
						that.htContentList.push(v);
					}
				}
			});
			let nowObj = this.getCreateTime();
			this.currDayStr = `${nowObj.y}-${nowObj.m}-${nowObj.d}`;
			let yesterdayObj = this.getCreateTime(new Date() - 86400 * 1000);
			this.yesterdayStr = `${yesterdayObj.y}-${yesterdayObj.m}-${yesterdayObj.d}`;
			this.timeStr = this.currDayStr;

			this.getHtFormList();
		},
		computed: {
			getDays() {
				if (!this.signData) {
					return "";
				}
				let startDate = new Date(this.signData.createTime.split(" ")[0]);
				let nowDate = new Date();
				return Math.floor((nowDate - startDate) / 1000 / 24 / 60 / 60);
			},
			showSelectTime() {
				return this.timeStr != this.currDayStr && this.timeStr != this.yesterdayStr && this.timeStr != 0;
			},
			getCheckTimePart() {
				if (!this.signData) {
					return "";
				}
				return this.signData.checkTimePart.replace(',', ' - ');
			},
			getIsCheck() {
				return (itemName) => {
					for (let v of this.htFormRecordAry) {
						if (!v) {
							continue;
						}
						if (v.list[0].content == itemName) {
							return true;
						}
					}
					return false;
				}
			},
			isCanCheck() {

				for (let v of this.htFormRecordAry) {
					if (v.userId == this.$store.state.userId) {
						return false;
					}
				}
				return true;
			},
			getCheckNum() {
				let checkNum = this.htFormRecordAry.length;
				let staffNum = this.staffNameAry.length;
				return checkNum > staffNum ? staffNum : checkNum;
			}
		},
		methods: {
			initData() {
				let that = this;
				this.$api.request({
					url: this.$api.solitaire + "/" + this.signId,
				}).then(resp => {
					if (resp.code == 200) {
						console.log(resp, "sdssdad");
						that.signData = resp.data;
						if (resp.data.staffName) {
							let tempAry = resp.data.staffName.split(",");
							that.staffNameAry = [];
							for (let v of tempAry) {
								that.staffNameAry.push({
									isDk: false,
									name: v
								});
							}
						}
					}
				});
			},
			onSelectTime(obj) {
				this.timeStr = `${obj.year}-${obj.month}-${obj.day}`;

				this.getHtFormList();
			},
			setTimeStr(str) {
				if (str == -1) {
					this.showPicker = true;
					return;
				}
				this.timeStr = str;
				this.getHtFormList();
			},
			getCreateTime(sec = null) {
				var current = sec ? new Date(sec) : new Date(); //实例化Date对象
				var y = current.getFullYear(); //获取年份
				var m = current.getMonth() + 1; //获取月份，默认显示0-11，所以+1
				m = m < 10 ? ('0' + m) : m;
				var d = current.getDate(); //获取日期
				var h = current.getHours(); //获取时
				var mm = current.getMinutes(); //获取分
				var s = current.getSeconds(); //获取秒
				d = d < 10 ? ('0' + d) : d;
				h = h < 10 ? ('0' + h) : h;
				mm = mm < 10 ? ('0' + mm) : mm;
				s = s < 10 ? ('0' + s) : s;
				return {
					y: y,
					m: m,
					d: d,
					h: h,
					mm: mm
				};
			},
			onUploadIcon(data, index, lists, name) {
				if (!data.url) {
					return;
				}
				if (this.htContentList[name]) {
					this.htContentList[name].inputText = data.url;
				}
			},
			onSubmitForm() {
				let that = this;
				let tempList = [];
				for (let v of this.htContentList) {
					tempList.push({
						checkFormId: v.id,
						content: v.inputText
					});
				}
				this.$api.request({
					url: this.$api.htForm,
					method: "POST",
					data: {
						checkId: this.signId,
						userId: this.$store.state.userId,
						list: tempList
					}
				}).then(resp => {
					if (resp.code == 200) {
						// 刷新记录
						that.getHtFormList();
						that.initData();
						that.showPopup2 = false;
					}
				});
			},
			getHtFormList() {
				let dataObj = {
					checkId: this.signId,
					createTimeStr: this.timeStr != 0 ? this.timeStr : ""
				}
				let that = this;
				if (this.createTime) {
					dataObj.createTime = this.timeStr;
				}
				this.$api.request({
					url: this.$api.htFormList,
					data: dataObj
				}).then(resp => {
					if (resp.code == 200) {
						console.log(resp, '数据');
						// 刷新记录
						that.htFormRecordAry = resp.rows;
					}
				});
			},
			onClickOpenPopup2() {
				// console.log(this.isCanCheck,'1111');
				if (!this.isCanCheck) {
					return;
				}
				this.showPopup2 = true;
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import "@/static/css/app.scss";

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 26rpx;

		.view-group {
			width: 100%;
			background: #fff;
			padding: 20rpx 20rpx;
		}

		.title {
			width: 710rpx;
			color: #000;
			font-weight: 500;
			font-size: 36rpx;
			text-align: left;
		}

		.text-line {
			color: rgb(144, 144, 144);
			font-size: 24rpx;
		}

		.avatar-view {
			position: relative;
			width: 710rpx;
			margin: 40rpx 0;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50rpx;
			}

			.text-name {
				position: absolute;
				top: 10rpx;
				left: 120rpx;
			}

			.text-createTime {
				position: absolute;
				top: 50rpx;
				left: 120rpx;
				font-size: 22rpx;
				color: #5e5e5e;
			}
		}

		.name-view {
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			width: 720rpx;
			height: auto;

			.name-item {
				position: relative;
				width: 100rpx;
				height: 70rpx;
				line-height: 70rpx;
				background: #f7f8fa;
				border-radius: 8rpx;
				color: #97989a;
				font-size: 20rpx;
				text-align: center;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				white-space: nowrap;
				overflow: hidden;
				border: 1rpx solid #f7f8fa;
			}

			.name-item-check {
				border: 1rpx solid #18c543;
			}
		}

		.use-template-view {
			position: fixed;
			bottom: 0;
			margin-top: 200rpx;
			background: #fff;
			box-shadow: 0px 0px 5px 2px rgba(100, 100, 100, 0.5);
			width: 750rpx;
			padding: 0 20rpx;
			height: 100rpx;
			z-index: 999;

			.use-template-btn {
				width: 600rpx;
				height: 70rpx;
				line-height: 70rpx;
				border-radius: 35rpx;
				text-align: center;
				background: #fc9802;
				color: #fff;
			}

			.btn-disable {
				background: rgb(234, 234, 234);
				color: rgb(99, 99, 99);
			}
		}

		.time-item {
			padding: 0 20rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			font-size: 22rpx;
			border-radius: 25rpx;
			margin-right: 10rpx;
			background: #f7f8fa;
			border: 1px solid #f7f8fa;
		}

		.time-select-item {
			background: #fc9802;
			border: 1px solid #fc9802;
		}

		.record-item {
			width: 750rpx;
			padding: 30rpx 0;
			border-bottom: 1px solid #d8d8d8;
			background: #fff;

			.record-icon {
				width: 60rpx;
				height: 60rpx;
				border-radius: 30rpx;
				background: #000;
				margin-left: 40rpx;
			}

			.content-view {
				margin-left: 20rpx;
			}
		}

		.submit-item {
			width: 710rpx;
			margin-bottom: 40rpx;

			.sunmit-title {
				color: #000;
				font-weight: 500;
				font-size: 26rpx;
				margin-bottom: 20rpx;
			}

			.name-input {
				width: 100%;
				height: 60rpx;
				line-height: 60rpx;
				border: 1px solid #d8d8d8;
				border-radius: 10rpx;
			}
		}

		.view-line {
			width: 100%;
			height: 1rpx;
			background: rgb(249, 249, 249);
		}

		.m-top-20 {
			margin-top: 20rpx;
		}
	}
</style>